<template>

  <div style="width: 100%;">
    <div class="rate-all-container">
      <el-button :icon="ArrowLeft" class="font-size-16" @click="goObservationNotes"> {{ $t('loc.backPfl') }} </el-button>
      <div class="child-card-list">
        <el-card v-for="child in children" class="child-card" :class="{'child-list-click' : currentChildId === child.id}" shadow="hover" @click="selectChildClick(child.id)">
          <div>
            <img :src="child.avatarUrl" style="height: 60px;width: 60px;">
            <div class="overflow-ellipsis text-center" style="max-width: 60px;">
              <span class="font-size-16 line-height-18">{{ child.displayName }}</span>
            </div>
          </div>
        </el-card>
      </div>

      <div class="framework-name"><span>当前测评框架:</span> <span style="color: #22BAFF;">{{ frameworkScoreTemplate.frameworkName }}</span></div>
      <div class="flex-space-between">
        <div class="font-size-16 line-height-30 text-default">
          <span>{{ $t('loc.class') }}:</span>
          <span style="color: #22BAFF;">{{ currentChild.groupName }}</span>
          &nbsp;&nbsp;
          <span>{{ $t('loc.Child') }}:</span>
          <span style="color: #22BAFF;">{{ currentChild.displayName }}</span>
        </div>
        <div>
          <span>评分周期: </span>
          <el-select v-model="currentPeriodAliasName" placeholder="评分周期" size="large">
            <el-option
                v-for="period in periodAliasList"
                :key="period.name"
                :label="period.displayName"
                :value="period.name"
                 style="width: 100%;display: flex;justify-content: space-between;"
            >
              <span>{{ period.displayName }}</span> <span style="color: #f05050;" v-if="period.active === true"> {{ $t('loc.active') }}</span>
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="lg-pa-6 add-padding-b-12">
        <GeneralMeasureTable :childId="currentChildId" :frameworkScoreTemplate="frameworkScoreTemplate" :periodAlias="currentPeriodAlias"></GeneralMeasureTable>
      </div>
    </div>
  </div>
</template>

<script>
import ChildApi from "@/api/child";
import PeriodApi from "@/api/period";
import FrameworkApi from "@/api/framework";
import router from "@/router";
import GeneralMeasureTable from "@/views/modules/FrameworkScore/GeneralMeasureTable.vue";
import {ArrowLeft} from "@element-plus/icons-vue";

export default {
  name: "RateAll",
  components: {
    GeneralMeasureTable,
  },
  data() {
    return {
      ArrowLeft,
      children: [],
      currentChildId: '',
      currentGroupId: '',
      currentSchoolId: '',
      frameworkScoreTemplate: {},
      frameworkScoreTemplateLoading: false,
      periodAliasList: [],
      currentPeriodAliasName: '',
      activePeriodAlias: '',
    }
  },
  watch: {
    // 時刻 监听路由
    '$route': {
      immediate: true,
      handler: function (to, oldVal) {
        // 通过路由参数获取当前的groupId childId
        this.currentSchoolId = to.params.schoolId || '';
        this.currentGroupId = to.params.groupId || '';
        this.currentChildId = to.params.childId || '';
      },
    },
    currentGroupId: {
      handler (val, oldVal) {
        if (oldVal === val) {
          return
        }
        this.loadChildren();
      }
    },
    currentChildId: {
      handler (val, oldVal) {
        if (oldVal === val) {
          return
        }
        this.loadFrameworkScoreTemplate();
      }
    },
  },
  created() {
    this.loadPeriodAliasList();
    this.loadChildren();
  },
  computed: {
    currentChild() {
      if (!this.currentChildId) {
        return this.children[0] || {}
      }
      return this.children.find(item => item.id === this.currentChildId) || {}
    },
    currentPeriodAlias() {
      if (!this.currentPeriodAliasName) {
        return {}
      }
      return this.periodAliasList.find(item => item.name === this.currentPeriodAliasName) || {}
    },
  },
  methods: {
    loadChildren (groupId) {
      groupId = groupId || this.currentGroupId;
      if (!groupId) {
        return
      }
      this.childrenLoading = true
      let params = {
        groupId: groupId,
      }
      ChildApi.getChildren(params).then(res => {
        this.children = res.children
        if (this.children.length === 0) {
          return
        }
        if (this.currentChildId) {
          let child = this.children.find(item => item.id === this.currentChildId)
          if (child) {
            this.currentChildId = child.id
          } else {
            this.currentChildId = this.children[0].id
          }
        } else {
          this.currentChildId = this.children[0].id
        }
        let frameworkId = this.children.find(item => item.id === this.currentChildId).frameworkId
        this.loadFrameworkScoreTemplate(frameworkId);
        this.updateRouter()
      }).catch(error => {
        console.log(error)
      }).finally(() => {
        this.childrenLoading = false
      })
    },
    // 加載框架評分模板
    loadFrameworkScoreTemplate (frameworkId) {
      let child = this.children.find(item => item.id === this.currentChildId)
      if (!frameworkId && child) {
        frameworkId = child.frameworkId
      }
      if (!frameworkId) {
        return
      }
      if (frameworkId === this.frameworkScoreTemplate.frameworkId) {
        return
      }
      this.frameworkScoreTemplateLoading = true
      FrameworkApi.getFrameworkScoreTemplate(frameworkId).then(res => {
        this.frameworkScoreTemplate = res
      }).catch(error => {
        this.$message.error(error.response.data.description)
      }).finally(() => {
        this.frameworkScoreTemplateLoading = false
      })
    },
    loadPeriodAliasList () {
      PeriodApi.getPeriodAlias().then(res => {
        this.periodAliasList = res
        this.activePeriodAlias = this.periodAliasList.find(item => item.active === true) || {}
        this.currentPeriodAliasName = this.activePeriodAlias.name || ''
      }).catch(error => {
        this.$message.error(error.response.data.description)
      }).finally(() => {
        this.periodLoading = false
      })
    },
    selectChildClick (childId) {
      this.currentChildId = childId
      this.updateRouter()
    },
    // 更新路由
    updateRouter (schoolId, groupId, childId) {
      let params = {
        schoolId: this.currentSchoolId,
        groupId: this.currentGroupId,
        childId: this.currentChildId ? this.currentChildId : this.children[0].id
      }
      if (schoolId) {
        params.schoolId = schoolId
      }
      if (groupId) {
        params.groupId = groupId
      }
      if (childId) {
        params.childId = childId
      }
      router.push({
        name: 'rateAll',
        params: params
      })
    },
    goObservationNotes () {
      router.push({
            name: 'note', params: {
              schoolId: this.currentSchoolId,
              groupId: this.currentGroupId,
              childId: this.currentChildId
            }
          }
      )
    },
  },
}
</script>

<style scoped lang="less">
.child-list-click {
  border: 1px solid #08C;
  background-color: #08C;
  color: #FFF!important;
}
.rate-all-container {
  background-color: #fff;
  min-height: 600px;
  margin: 10px auto 0;
  max-width: 1130px;
  padding: 15px;
}
.framework-name {
  font-size: 16px;
  line-height: 30px;
  color: #58666e;
}
.child-card-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.child-card {
  width: fit-content;
  height: fit-content;
  margin: 5px;
  /deep/ .el-card__body {
    padding: 5px 8px;
  }
}
</style>